<template>
	<!-- 产品库 -->
	<view class="">
		<nav-tab :navIndex="2"></nav-tab>
		<!-- 广告插入 -->
		<adview :title="title" @adfun="adfun"></adview>
		<view v-if="!adShow">
			<u-sticky>
				<view class="header bg-white px-2 py-1">
					<view><search-view @search="searchChange" @clear="searchChange"></search-view></view>
					<!-- <button class="filter_btn bg-white ml-2 flex justify-center align-center" @click="filterShow = true">
				<image src="@/static/img2/home/fif_icon.png" mode="aspectFill"></image>
				<text>筛选</text>
			</button> -->
				</view>
				<view><tab :tab-list="productCate" @tabAll="tabAll" @contTabChange="contTabChange" :count-num="countNum"></tab></view>
				<view style="margin-top: -10rpx;" class="mb-1" v-if="catId == 41">
					<u-gap height="7" bgColor="#F9F9F9"></u-gap>
					<view class="bg-white p-2 flex">
						<view
							v-for="(item, index) of powerTabs"
							:key="index"
							class="font-small mr-3"
							:class="{ power_active: powerCur == index }"
							@click="powerChange(item, index)"
						>
							{{ item }}
						</view>
					</view>
				</view>
			</u-sticky>
			<view class="container">
				<view class="" v-if="list.length == 0">
					<view class="p-2 mt-3"><u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty></view>
				</view>
				<view v-else>
					<view class="mt-3"><product-list v-if="list.length >= 1" :list="list" :btn-show="true" class="flex flex-wrap justify-between"></product-list></view>
					<u-loadmore :status="status" color="#E5E5E5" lineColor="#E5E5E5" dashed line />
				</view>
			</view>
			<!-- 筛选弹出层 -->
			<u-popup :show="filterShow" mode="bottom" closeOnClickOverlay @close="close">
				<view><text>筛选弹出层</text></view>
			</u-popup>
			<u-back-top :scroll-top="scrollTop"></u-back-top>
		</view>
	</view>
</template>

<script>
import navTab from '@/components/nav-tab/nav-tab.vue';
import { productCategory, getProductList } from '@/api/home/nav/product_data.js';
import { exhibitionCondition } from '@/api/home/company.js';
import searchView from '@/components/search/search.vue';
import tab from '@/components/tab/index.vue';
import productList from '@/components/product_list/product_list.vue';
import adview from '@/components/adview/adview.vue';
export default {
	components: { navTab, searchView, productList, tab, adview },
	data() {
		return {
			productCate: [], //分类
			powerTabs: [],
			powerCur: 0,
			power: '',
			status: 'loadmore',
			page: 1, //页数
			suo: true,
			catId: '',
			list: [],
			countNum: [],
			checkTypes: 'cp',
			filterShow: false,
			searchVal: '',
			scrollTop: 0,
			adShow: true
		};
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	onLoad() {
		this.getInfo();
		this.getPower();
		this.getProduct('');
		// 分享
		wx.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
	},
	// onShow() {
	// 	this.reset();

	// },
	onReachBottom() {
		if (this.suo) {
			//定义个小锁，当没有数据时锁住suo
			this.status = 'loading';
			this.page = ++this.page;
			this.getProduct(this.catId);
		}
	},
	methods: {
		// 广告页
		adfun(val) {
			this.adShow = val;
		},
		reset() {
			this.list = [];
			this.page = 1;
		},
		searchChange(val) {
			// console.log("搜索",val);
			this.searchVal = val || '';
			this.reset();
			this.getProduct(this.catId);
		},
		getInfo() {
			// 产品分类
			productCategory()
				.then(res => {
					if (res.code == 0) {
						this.productCate = res.data;
						// this.getProduct('');
					} else {
						uni.$u.toast(res.msg);
					}
				})
				.catch(err => {
					console.log('获取产品分类失败', err);
				});
		},
		// tab-全部
		tabAll() {
			this.catId = '';
			this.power = '';
			this.reset();
			this.getProduct('');
		},
		contTabChange(e) {
			this.catId = e.val.id;
			this.power = '';
			this.reset();
			this.getProduct(e.val.id);
		},
		// 获取功率筛选条件
		getPower() {
			exhibitionCondition().then(res => {
				if (res.code == 0) {
					this.powerTabs = ['全部', ...res.data.list];
				} else {
					console.log('获取功率筛选条件失败');
				}
			});
		},
		tabChange(e) {
			this.catId = e.val.id;
			this.reset();
			this.getProduct(e.val.id);
		},
		powerChange(val, idx) {
			this.powerCur = idx;
			this.power = val == '全部' ? '' : val;
			this.reset();
			this.getProduct(this.catId);
		},
		// 产品列表
		getProduct(val) {
			let res = {
				page: this.page,
				mid: val,
				kw: this.searchVal || '',
				token: uni.getStorageSync('userInfo').token || '',
				search: this.power,
				is_screen: this.power ? 1 : 0 // 1 筛选，0：不筛选
			};
			getProductList(res).then(res => {
				// console.log('产品列表', res.data.list);
				this.countNum = res.data.count;
				this.list.push(...res.data.list);
				if (res.data.list.length == 0) {
					this.status = 'nomore';
					this.suo = false;
				} else if (res.data.list.length < 10) {
					this.status = 'nomore';
					this.suo = false;
				} else {
					this.status = 'loadmore';
					this.suo = true;
				}
			});
		},
		close() {
			this.filterShow = false;
		}
	}
};
</script>

<style lang="scss" scoped>
.head_box {
	position: sticky;
	top: 0;
	left: 0;
}

.header {
	width: 100%;

	.filter_btn {
		width: 142rpx;
		height: 56rpx;
		border: 1px solid #d2d2d2;
		border-radius: 28rpx;
		font-size: 20rpx;
		line-height: 56rpx;

		image {
			width: 25rpx;
			height: 25rpx;
			margin-right: 5rpx;
		}
	}
}

// .cont_tab {
// 	.tab_item {
// 		display: inline-block;
// 		background-color: #d3d3d3;
// 		padding: 5rpx 15rpx;
// 		border-radius: 15rpx;
// 	}

// 	.cont_tab_active {
// 		background-color: $color14;
// 	}
// 	.scroll_cont {
// 		white-space: nowrap;
// 		width: 100%;
// 	}
// }

/* .not_state {
	margin-top: 30rpx;
	.not_text {
		color: #969696;
	}
	.add_btn {
		width: 300rpx;
		background-color: $color14;
		border: 0;
		color: #fff;
	}
	.popup_text {
		padding: 50rpx;
	}
	.join_popup_btn {
		.btn {
			width: calc((100% / 2) - 30rpx);
			border-radius: 15rpx;
		}
	}
	.select_card {
		.cart_item {
			width: 100%;
		}
		.l_radio {
			margin-top: -70rpx;
		}
	}
} */
::v-deep .u-modal {
	border-radius: 6px;
	overflow: hidden;
	background: #f2f2f2;
	// opacity: 0.99;
}

.power_active {
	color: $color14;
	font-size: 24rpx;
	font-weight: bold;
}
</style>
